<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <meta content="0" http-equiv="Expires"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="no-cache" http-equiv="Cache-control"/>
    <meta content="no-cache" http-equiv="Cache"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>

    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/static/main/img/favicon.png}" type="image/x-icon"/>

    <!-- title -->
    <title th:if="${systemTitle}" th:text="${modifyPwd}+${systemTitle}"></title>
    <title th:text="${modifyPwd}+' | HZERO'" th:unless="${systemTitle}"></title>

    <link rel="stylesheet" th:href="@{/static/main/css/bootstrap-3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/main/css/modify_password.css}"/>

    <script th:src="@{/static/main/js/jquery.min.js}"></script>
    <script th:src="@{/static/main/js/jsencrypt.min.js}"></script>
    <script th:src="@{/static/main/js/jquery.validate.min.js}"></script>
    <script th:src="@{/static/main/js/password-modify.js}"></script>

    <template id="templateData"
              th:attr="data-copyright=${copyright},data-loginUrl=@{/login(template=${template})},data-modifyPwd=${modifyPwd},data-optionSucceeded=${optionSucceeded},data-optionFailed=${optionFailed},data-checkAccount=${checkAccount},data-resetPassword=${resetPassword},data-complete=${complete},data-validateAccountErr=${validateAccountErr},data-validateAccountFailed=${validateAccountFailed},data-userNameNotNull=${userNameNotNull},data-findAccount=${findAccount},data-captchaPlaceholder=${captchaPlaceholder},data-captchaMessage=${captchaMessage},data-cancel=${cancel},data-nextStep=${nextStep},data-preStep=${preStep},data-validatePwdRepeat=${validatePwdRepeat},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-getCaptcha=${getCaptcha},data-newPwdCanNotNul=${newPwdCanNotNul},data-resetPwdErr=${resetPwdErr},data-resetPwd=${resetPwd},data-pwdRepeatMsg=${pwdRepeatMsg},data-resetPwdSucceeded=${resetPwdSucceeded},data-loadingNow=${loadingNow},data-pwdRepeat=${pwdRepeat},data-validateLength=${validateLength},data-validateLower=${validateLower},data-validateUpper=${validateUpper},data-validateDigit=${validateDigit},data-validateSpecial=${validateSpecial},data-atLeast=${atLeast},data-validateUserName=${validateUserName},data-orgId=${session.organizationId},data-publicKey=${session.publicKey},data-captchaLoadingMsg=${captchaLoadingMsg},data-captchaLoadErrgMsg=${captchaLoadErrgMsg},data-forceMobileVerify=${forceCodeVerify},data-phone=${phone},data-phoneMsg=${phoneMsg}">
    </template>

</head>

<body>
<div id="app">
    <div class="password-container password-layout">
        <div class="password-layout-header">
            <div class="logo">
                <a th:href="@{/login(template=${template})}">
                    <img alt="HZERO" height="24px"
                         th:src="${logoUrl}?${logoUrl}:'/oauth/static/main/img/logo.png'"/>
                </a>
            </div>
        </div>
        <div class="password-layout-content">
            <div class="password-tab">
                <div class="password-steps">
                    <div class="password-steps-item 'password-steps-item-process'"
                         th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} != '0' ? 'password-steps-item-finish' : ''">
                        <div class="password-steps-item-icon">
                                <span class="password-steps-icon"
                                      th:text="${param.currentStep != null ? param.currentStep[0] : '0'} != '0'?'√':'1'">1</span>
                        </div>
                        <div class="password-steps-item-content">
                            <div class="password-steps-item-title" th:text="${resetPassword}">重置密码</div>
                        </div>
                    </div>
                    <div class="password-steps-item"
                         th:classappend="${param.currentStep != null ? param.currentStep[0] : '0'} == '1' ? 'password-steps-item-process' : 'password-steps-item-wait'">
                        <div class="password-steps-item-icon">
                            <span class="password-steps-icon">2</span>
                        </div>
                        <div class="password-steps-item-content">
                            <div class="password-steps-item-title" th:text="${complete}">完成</div>
                        </div>
                    </div>
                </div>

                <div class="password-spin-nested-loading">
                    <div class="password-spin-container">

                        <form id="formResetPassword"
                              th:if="${param.currentStep != null ? param.currentStep[0] : 0} == 0">
                            <div class="password-form">

                                <div class="password-form-item">
                                        <span class="password-form-item-children">
                                            <span class="password-form-item-children-prefix">
                                                <div class="password-input-content">
                                                    <span class="password-form-input-prefix">
                                                        <i class="glyphicon glyphicon-user"></i>
                                                    </span>
                                                    <div class="form-group password-form-item-children-input">
                                                        <input class="form-control password-form-input" id="password"
                                                               name="password"
                                                               th:placeholder="${resetPwd}"
                                                               type="password">
                                                        <span class="glyphicon glyphicon-eye-close look"></span>
                                                    </div>
                                                </div>
                                            </span>
                                            <div class="password-validate popover" style="display:block"></div>
                                        </span>
                                </div>
                                <div class="password-form-item">
                                        <span class="password-form-item-children">
                                            <span class="password-form-item-children-prefix">
                                                <div class="password-input-content">
                                                    <span class="password-form-input-prefix">
                                                        <i class="glyphicon glyphicon-user"></i>
                                                    </span>
                                                    <div class="form-group password-form-item-children-input">
                                                        <input class="form-control password-form-input"
                                                               id="passwordRepeat" name="passwordRepeat"
                                                               th:placeholder="${pwdRepeat}"
                                                               type="password">
                                                        <span class="glyphicon glyphicon-eye-close look"></span>
                                                    </div>
                                                </div>
                                            </span>
                                        </span>
                                </div>
                                <div class="password-form-item" th:if="${forceCodeVerify}">
                                        <span class="password-form-item-children">
                                          <span class=""
                                                th:classappend="${param.phone != null ? param.phone[0] : ''} == '' ? 'password-form-item-children-prefix' : ''">
                                            <div class="password-input-content">
                                                <span class="password-form-input-prefix"
                                                      th:if="${param.phone != null ? param.phone[0] : ''} == ''">
                                                    <i class="glyphicon glyphicon-earphone"></i>
                                                </span>
                                              <div class="form-group"
                                                   th:classappend="${param.phone != null ? param.phone[0] : ''} == '' ? 'password-form-item-children-input' : ''">
                                                <input class="form-control password-form-input" id="phone" name="phone"
                                                       th:disabled="${param.phone != null ? param.phone[0] : ''} != ''"
                                                       th:placeholder="${phonePlaceholder}"
                                                       th:value="${param.phone != null ? param.phone[0] : ''} != ''?${secCheckPhonePhone}+':'+${phone}:''"
                                                       type="text">
                                              </div>
                                    </div>
                                    </span>
                                    </span>
                                </div>
                                <div class="password-form-item" th:if="${forceCodeVerify}">
                                    <div class="password-form-item-control">
                                          <span class="password-form-item-children">
                                            <div class="password-row">
                                              <div class="password-col-12">
                                                <span class="password-form-item-children-prefix">
                                                  <div class="password-input-content">
                                                    <span class="password-form-input-prefix">
                                                      <i class="glyphicon glyphicon-pencil"></i>
                                                    </span>
                                                    <div class="form-group password-form-item-children-input">
                                                      <input class="form-control password-form-input" id="phoneCaptcha"
                                                             name="phoneCaptcha"
                                                             th:placeholder="${captchaLoadingMsg}" type="text">
                                                    </div>
                                                  </div>
                                                </span>
                                              </div>
                                              <div class="password-col-12">
                                                <button class="btn btn-flat btn-raised password-form-button-captcha"
                                                        th:text="${captchaLoadingMsg}"></button>
                                              </div>
                                            </div>
                                          </span>
                                    </div>
                                </div>
                                <div class="password-form-item">
                                        <span class="password-form-item-children">
                                            <button class="btn btn-primary btn-raised password-btn password-btn-confirm-account"
                                                    th:text="${complete}"
                                                    type="submit"></button>
                                        </span>
                                </div>
                            </div>
                        </form>

                        <form class="password-success" id="resetPasswordSuccess"
                              th:if="${param.currentStep != null ? param.currentStep[0] : ''} == 1">
                            <div class="password-form">
                                <img src="/oauth/static/main/img/illustrate_success.png"/>
                                <p class="finish-fonts" th:text="${resetPwdSucceeded}"></p>
                                <div class="password-form-item">
                                        <span class="password-form-item-children">
                                            <button class="btn btn-raised button-login" th:text="${loadingNow}"
                                                    type="submit"></button>
                                        </span>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <div class="password-layout-footer"
             th:utext="${copyright}?${copyright}:'Copyright © The HZERO Author®.All rights reserved.'">
        </div>
    </div>
</div>
<div class="password-notification"></div>
</body>

</html>